<template>
  <GridPage title="企业信息审核" size="large">
    <n-card class="mt-12" title="待审核企业信息">
      <n-data-table
        :bordered="false"
        :columns="unauditedColumns"
        :data="unauditedCompany"
        :pagination="pagination"
      />
    </n-card>
    <n-card class="mt-12" title="审核通过企业信息列表">
      <n-data-table
        :bordered="false"
        :columns="auditedColumns"
        :data="auditedCompany"
        :pagination="pagination"
      />
    </n-card>
  </GridPage>

  <MeModal ref="modalRef" title="企业信息详情" width="800px" :showCancel="false" :showOk="false">
    <n-scrollbar style="max-height: 500px">
      <n-card embedded>
        <n-h1>{{ display.company_name }}</n-h1>
        <div>
          <n-text class="mr-10">{{ address }}</n-text>
          |
          <n-text class="mr-10 ml-10">{{ industry }}</n-text>
          |
          <n-text class="ml-10">{{ size }}</n-text>
        </div>
      </n-card>
      <n-card class="mt-12" embedded>
        <n-h4>企业详情</n-h4>
        <div>企业名称：{{ display.company_name }}</div>
        <div class="mt-10">特点标签：</div>
        <n-flex>
          <div v-for="item in display.company_tags">
            <n-tag round>{{ item }}</n-tag>
          </div>
        </n-flex>
        <div class="mt-10">福利标签：</div>
        <n-flex>
          <div v-for="item in display.benefit_tags">
            <n-tag round>{{ item }}</n-tag>
          </div>
        </n-flex>
        <n-divider></n-divider>
        <n-h4 class="mt-12">企业描述</n-h4>
        <p v-for="descs in descriptions">{{ descs }}</p>
      </n-card>
    </n-scrollbar>
  </MeModal>
</template>

<script setup>
import { NTag, NButton } from 'naive-ui'
import { MeModal, GridPage } from '@/components'
import adminApi from '@/api/admin'
import { useModal } from '@/composables'
import { getCity, getCompanySize, getIndustriesName, getJobName } from '@/data'

//未审核表格列数据
const unauditedColumns = ref([
  {
    title: '企业id',
    key: 'company_id',
    align: 'center',
    width: '100px',
  },
  {
    title: '申请者id',
    key: 'owner_id',
    align: 'center',
    width: '100px',
  },
  {
    title: '公司名称',
    key: 'company_name',
    align: 'center',
    width: '150px',
  },
  {
    title: '审核状态',
    key: 'audit_state',
    align: 'center',
    width: '90px',
    render(row) {
      const obj = audit_state[row.state]
      return h(
        NTag,
        {
          style: {
            marginRight: '6px',
          },
          type: obj.type,
          bordered: false,
        },
        {
          default: () => obj.label,
        }
      )
    },
  },
  {
    title: '操作',
    key: 'action',
    align: 'center',
    width: '180px',
    render(row) {
      return [
        h(
          NButton,
          {
            type: 'info',
            secondary: true,
            class: 'mr-5',
            onClick: () => handleDetail(row),
          },
          { default: () => '查看详情' }
        ),
        h(
          NButton,
          {
            type: 'success',
            secondary: true,
            class: 'mr-5',
            disabled: row.state !== 0,
            onClick: () => handleAgree(row),
          },
          { default: () => '通过' }
        ),
        h(
          NButton,
          {
            type: 'error',
            secondary: true,
            disabled: row.state !== 0,
            onClick: () => handleDisagree(row),
          },
          { default: () => '否决' }
        ),
      ]
    },
  },
])

//审核通过的招聘职位表格列数据
const auditedColumns = ref([
{
    title: '企业id',
    key: 'company_id',
    align: 'center',
    width: '100px',
  },
  {
    title: '申请者id',
    key: 'owner_id',
    align: 'center',
    width: '100px',
  },
  {
    title: '公司名称',
    key: 'company_name',
    align: 'center',
    width: '150px',
  },
  {
    title: '审核状态',
    key: 'audit_state',
    align: 'center',
    width: '90px',
    render(row) {
      const obj = audit_state[row.state]
      return h(
        NTag,
        {
          style: {
            marginRight: '6px',
          },
          type: obj.type,
          bordered: false,
        },
        {
          default: () => obj.label,
        }
      )
    },
  },
  {
    title: '操作',
    key: 'action',
    align: 'center',
    width: '130px',
    render(row) {
      return [
        h(
          NButton,
          {
            type: 'info',
            secondary: true,
            class: 'mr-5',
            onClick: () => handleDetail(row),
          },
          { default: () => '查看详情' }
        ),
        // h(
        //   NButton,
        //   {
        //     type: 'error',
        //     secondary: true,
        //     disabled: row.state !== 1,
        //     onClick: () => handleDelete(row),
        //   },
        //   { default: () => '撤销' }
        // ),
      ]
    },
  },
])

const pagination = {
  pageSize: 5,
}

//显示详情的职位信息对象
const display = ref({})

//未审核招聘信息数据
const unauditedCompany = ref([])

//全部招聘信息数据
const auditedCompany = ref([])

let address = computed(() => {
  return getCity(display.value.address_code)
})

let industry = computed(() => {
  return getIndustriesName(display.value.industry_code)
})

let size = computed(() => {
  return getCompanySize(display.value.size)
})

let descriptions = computed(() => {
  return display.value.description.split(/[\r\n]+/)
})

const audit_state = [
  { type: 'warning', label: '审核中' },
  { type: 'success', label: '已通过' },
  { type: 'error', label: '未通过' },
  { type: 'error', label: '已撤销' },
]

const [modalRef] = useModal()

//打开查看详情对话框
function handleDetail(row) {
  const value = display.value
  value.company_id = row.company_id
  value.owner_id = row.owner_id
  value.company_name = row.company_name
  value.size = row.size
  value.company_tags = row.company_tags
  value.benefit_tags = row.benefit_tags
  value.industry_code = row.industry_code
  value.address_code = row.address_code
  value.description = row.description
  modalRef.value.open()
}

function handleAgree(row) {
  $dialog.error({
    title: '确定通过',
    content: '是否通过该企业信息？',
    positiveText: '确认',
    negativeText: '取消',
    async onPositiveClick() {
      await adminApi.agreeCompany(row.company_id)
      $message.success('通过成功')
      row.state = 1
    },
  })
}

function handleDisagree(row) {
  $dialog.error({
    title: '确定否决',
    content: '是否不通过该企业信息？',
    positiveText: '不通过',
    negativeText: '取消',
    async onPositiveClick() {
      await adminApi.disagreeCompany(row.company_id)
      $message.success('不通过成功')
      row.state = 2
    },
  })
}

function handleDelete(row) {
  $dialog.error({
    title: '确定撤销',
    content: '是否撤销该企业信息？',
    positiveText: '撤销',
    negativeText: '取消',
    async onPositiveClick() {
      await adminApi.deleteCompany(row.company_id)
      $message.success('撤销成功')
      row.state = 2
    },
  })
}

onMounted(async () => {
  let res = await adminApi.getUnauditedCompany()
  unauditedCompany.value = res.data
  res = await adminApi.getAuditedCompany()
  auditedCompany.value = res.data
})
</script>
